---
title: <Render>
---

# \<Render\>

Render a [`Data`](/docs/api-reference/data-model/data) object for a given [`Config`](/docs/api-reference/configuration/config).

```tsx copy showLineNumbers
import { Render } from "@measured/puck";

export function Example() {
  return <Render config={config} data={data} />;
}
```

## Props

| Param                   | Example                      | Type                                        | Status   |
| ----------------------- | ---------------------------- | ------------------------------------------- | -------- |
| [`config`](#config)     | `config: { components: {} }` | [Config](/docs/api-reference/config)        | Required |
| [`data`](#data)         | `data: {}`                   | [Data](/docs/api-reference/data-model/data) | Required |
| [`metadata`](#metadata) | `metadata: {}`               | [Metadata](/docs/api-reference/metadata)    | -        |

## Required props

### `config`

An object describing the available components, fields and more. See the [`Config` docs](/docs/api-reference/configuration/config) for a full reference.

```tsx {4-17} copy
export function Example() {
  return (
    <Render
      config={{
        components: {
          HeadingBlock: {
            fields: {
              children: {
                type: "text",
              },
            },
            render: ({ children }) => {
              return <h1>{children}</h1>;
            },
          },
        },
      }}
      // ...
    />
  );
}
```

### `data`

The data to render against the provided config. See the [`Data` docs](/docs/api-reference/data-model/data) for a full reference.

```tsx {4-12} copy
export function Example() {
  return (
    <Render
      data={{
        content: [
          {
            props: { children: "Hello, world", id: "id" },
            type: "HeadingBlock",
          },
        ],
        root: {},
      }}
      // ...
    />
  );
}
```

### `metadata`

An object containing additional data provided to each component's [`render`](/docs/api-reference/configuration/component-config#renderprops) and [`resolveData`](/docs/api-reference/configuration/component-config#resolvedatadata-params) functions.

```tsx {4,8} copy
export function Example() {
  return (
    <Render
      metadata={{ title: "Hello, world" }}
      config={{
        HeadingBlock: {
          render: ({ puck }) => {
            return <h1>{puck.metadata.title}</h1>; // "Hello, world"
          },
        },
      }}
      // ...
    />
  );
}
```
